import "../static/libs/flexible"
import "../scss/common.scss"
import "../scss/analysis.scss"
import http from "../utils/http"

//页码
let selectedIndex = 0
//第一次触碰的焦点 ，最后触碰的焦点 ，滑动距离
let startX, endX, dis = 0;
//收藏数组
let collection = []

async function main() {
    //获取已考试卷id
    const testedId = window.location.search.substr(1)
    console.log(testedId);

    //根据已考试卷id获取已考试卷
    const { data } = await http({ url: "/testeds/findById?id=" + testedId })
    console.log(data);
    collection.length = data.testId.exercises.length

    //根据学生id获取所有收藏试题
    const collectionExercises = await http({ url: "/collections/?id=" + data.studentId })
    console.log(collectionExercises);
    //渲染题目信息
    renderExerciseInfo(data)

    //翻页
    fanye(data)

    //点击按钮返回考试中心
    backTestCenter(data.typeId)

    //根据后端收藏试题数据查找当前试卷试题是否被收藏
    checkIsCollection(data.testId.exercises, collectionExercises)

    //点击收藏
    collectionExercise(data)
}
main()

//渲染题目信息
function renderExerciseInfo(data) {
    //答案转化的数据
    const str = ["A", "B", "B", "C"]
    $("header .d2 .sp2").text(data.score)
    $("header .d3 .sp3").text(data.durations)
    $("main").html(`
            <div class="title">
                <p>${data.testId.exercises[selectedIndex].answer.length == 1 ? '单选题' : '多选题'}</p>
                <span>${data.testId.exercises[selectedIndex].topics}</span>
            </div>
            <div class="option">
                <input type="radio" name="name"><label> ${data.testId.exercises[selectedIndex].options[0]}</label><br>
                <input type="radio" name="name"><label> ${data.testId.exercises[selectedIndex].options[1]}</label><br>
                <input type="radio" name="name"><label> ${data.testId.exercises[selectedIndex].options[2]}</label><br>
                <input type="radio" name="name"><label> ${data.testId.exercises[selectedIndex].options[3]}</label><br>
            </div>
            <div class="answer">
                <img src="../static/images/duihua.png" alt="">
                <span class="spp ${(data.testId.exercises[selectedIndex].answer[0] == data.answers[selectedIndex]) ? 'rightAnswer' : ''}">
                ${(data.testId.exercises[selectedIndex].answer[0] == data.answers[selectedIndex]) ? '答案正确' : '答案错误'}
                </span><br>
                <p>考生答案: <i class="${(data.testId.exercises[selectedIndex].answer[0] == data.answers[selectedIndex]) ? 'rightAnswer' : ''}"
                ">${str[data.answers[selectedIndex]]}</i> </p>
                <p>正确答案: ${str[data.testId.exercises[selectedIndex].answer[0]]}</p>
                <p>答案解析：${data.testId.exercises[selectedIndex].analysis}</p>
            </div>
    `)
    //右下角题数渲染
    renderExercisesCounts(data)
    //渲染之前选中的答案
    renderChoosedAnswer(data)
}

//翻页
function fanye(data) {
    //获取第一次触碰屏幕的焦点startY的事件
    document.addEventListener('touchstart', function (e) {
        var touch = e.touches[0];
        startX = touch.pageX;
    })

    //获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
    document.addEventListener('touchmove', function (e) {
        var touch = e.touches[0];
        endX = touch.pageX;
        dis = startX - endX;
    })

    //滑动事件结束 如果手指滑动距离大于200 并且正向则执行pageTop函数 -->向上滑动翻页
    //滑动事件结束 如果手指滑动距离大于200 方向为负则执行pageDown函数 -->向下滑动翻页
    //翻页完毕 执行qingling函数 进行数值清零
    document.addEventListener('touchend', function (e) {
        //Math.abs 返回绝对值
        if (Math.abs(dis) > 200) {
            if (dis > 0) {
                if (selectedIndex >= data.testId.exercises.length - 1) alert("这是最后一题")
                else {
                    //渲染下一题
                    selectedIndex++
                    //渲染题目信息
                    renderExerciseInfo(data)
                    //控制收藏点亮的方法
                    controlCollectionLight()
                }
            } else {
                if (selectedIndex <= 0) alert("这是第一题")
                else {
                    //渲染上一题
                    selectedIndex--
                    //渲染题目信息
                    renderExerciseInfo(data)
                    //控制收藏点亮的方法
                    controlCollectionLight()
                }
            }
        }
        //归零
        reset()
    })
    //坐标归零
    function reset() {
        startX = 0
        endX = 0
        dis = 0
    }
}

//右下角题数渲染
function renderExercisesCounts(data) {
    $("footer .four span").html(`
    <strong>${selectedIndex + 1}</strong>/${data.testId.exercises.length}
    `)
    //渲染题目列表
    renderExercisesList(data)
}

//渲染之前选中的答案
function renderChoosedAnswer(data) {
    //循环数组，查看是否有值
    if (data.answers[selectedIndex] != undefined) {
        //控制单选框选中状态
        $("main .option [name=name]").eq(data.answers[selectedIndex]).attr("checked", "checked")
        //控制选中答案字体颜色
        $("main .option label").eq(data.answers[selectedIndex]).css("color", "#6966eb")
    }
}

//点击返回考试中心
function backTestCenter(typeId) {
    $("footer .three p").on("click", function () {
        window.location.assign("test.html?" + typeId)
    })
    $("header .d1 img").on("click", function () {
        window.location.assign("test.html?" + typeId)
    })
}

//点击右下角题数弹出题目列表
function renderExercisesList(data) {
    $("footer .four").on("click", function () {
        $(".grayy").css("display", "block")
        $(".grayy .four span").html(`<strong>${selectedIndex + 1}</strong>/${data.testId.exercises.length}`)
        $(".grayy .danxuan p").html(`单选题(共${data.testId.exercises.length}题,合计${data.testId.exercises.length * 3}分)`)
        //渲染题号
        //控制题目列表收藏小图标 和渲染题号
        controlCollectionIcon(data)
        //滑动隐藏题目列表
        displayExercisesList()
    })
}

//滑动或点击隐藏题目列表
function displayExercisesList() {
    let startY, endY, disss = 0
    //获取第一次触碰屏幕的焦点startY的事件
    document.addEventListener('touchstart', function (e) {
        var touch = e.touches[0];
        startY = touch.pageY;
    })

    //获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
    document.addEventListener('touchmove', function (e) {
        var touch = e.touches[0];
        endY = touch.pageY;
        disss = startY - endY;
    })

    document.addEventListener('touchend', function (e) {
        //Math.abs 返回绝对值
        if (Math.abs(disss) > 200) {
            if (disss > 0) {

            } else {
                $(".grayy .list").addClass("fade")
                setTimeout(function () {
                    $(".grayy .list").removeClass("fade")
                    $(".grayy").css("display", "none")
                }, 300)
            }
        }
        //清零
        resetList()
    })
    //清零
    function resetList() {
        startY = 0
        endY = 0
        disss = 0
    }

    $(".grayy .on .three p").on("click", function () {
        $(".grayy .list").addClass("fade")
        setTimeout(function () {
            $(".grayy .list").removeClass("fade")
            $(".grayy").css("display", "none")
            resetList()
        }, 300)
    })
}

//根据后端收藏试题数据查找当前试卷试题是否被收藏
function checkIsCollection(exercises, collectionExercises) {
    if (collectionExercises.code != 0) {
        for (let i = 0; i < exercises.length; i++) {
            for (let j = 0; j < collectionExercises.data.length; j++) {
                if (exercises[i]._id == collectionExercises.data[j].exerciseId._id) {
                    collection[i] = exercises[i]._id
                }
            }
        }
        //控制收藏点亮的方法
        controlCollectionLight()
    }
}

//点击收藏
function collectionExercise(data) {
    //底部收藏
    $("footer .one").on("click", function () {
        if (collection[selectedIndex] != undefined) {
            //取消收藏
            //删除数据库该收藏试题
            http({
                url: "/collections/deleteCollection",
                method: "POST",
                data: {
                    studentId: data.studentId,
                    exerciseId: collection[selectedIndex]
                }
            })
            collection[selectedIndex] = undefined
        } else {
            //添加收藏
            //收藏的试题发送到后端
            collection[selectedIndex] = data.testId.exercises[selectedIndex]._id
            const tempArr = [collection[selectedIndex]]
            //收藏的试题发送到后端
            http(
                {
                    url: "/collections/getStuCollections",
                    method: "POST",
                    data: { studentId: data.studentId, collectionsArr: JSON.stringify(tempArr) }
                }
            )
        }
        //控制收藏点亮的方法
        controlCollectionLight()
    })
    //题目列表收藏
    $(".grayy .on .one").on("click", function () {
        if (collection[selectedIndex] != undefined) {
            //取消收藏
            //删除数据库该收藏试题
            http({
                url: "/collections/deleteCollection",
                method: "POST",
                data: {
                    studentId: data.studentId,
                    exerciseId: collection[selectedIndex]
                }
            })
            collection[selectedIndex] = undefined
        } else {
            //添加收藏
            //收藏的试题发送到后端
            collection[selectedIndex] = data.testId.exercises[selectedIndex]._id
            const tempArr = [collection[selectedIndex]]
            //收藏的试题发送到后端
            http(
                {
                    url: "/collections/getStuCollections",
                    method: "POST",
                    data: { studentId: data.studentId, collectionsArr: JSON.stringify(tempArr) }
                }
            )
        }
        //控制收藏点亮的方法
        controlCollectionLight()
        //控制题目列表收藏小图标
        controlCollectionIcon(data)
    })
}

//控制收藏点亮的方法
function controlCollectionLight() {
    //判断该题是否收藏
    if (collection[selectedIndex] != undefined) {
        //点亮收藏
        $("footer .one").css("color", "#fe8545")
        $(".grayy .on .one").css("color", "#fe8545")
    } else {
        //点暗收藏
        $("footer .one").css("color", "#8f8a8a")
        $(".grayy .on .one").css("color", "#8f8a8a")
    }
}

//控制题目列表收藏小图标 和渲染题号
function controlCollectionIcon(data) {
    let tempArr = ``
    for (let i = 0; i < data.testId.exercises.length; i++) {
        //判断该题是否被收藏
        tempArr += `<div class="one">${collection[i] != undefined ? "<i class='fa fa-star'></i>" : ""} ${i + 1} </div>`
    }
    $(".grayy .danxuan .tihao").html(tempArr)
    //控制题目列表的题对错状态
    controlExercisesListState(data)
    //点击题目列表的题号，定位到该题
    clickExerciseNumLocate(data)
}

//控制题目列表的题对错状态
function controlExercisesListState(data) {
    for (let i = 0; i < data.testId.exercises.length; i++) {
        if (data.testId.exercises[i].answer[0] == data.answers[i]) {
            $(".grayy .danxuan .one").eq(i).removeClass("notChoose")
        } else $(".grayy .danxuan .one").eq(i).addClass("notChoose")
    }
}

//点击题目列表的题号，定位到该题
function clickExerciseNumLocate(data) {
    $(".grayy .danxuan .one").on("click", function () {
        //调用渲染题的方法，参数为题目对象参数
        selectedIndex = $(this).text().trim() - 1
        //控制题目列表的页码
        $(".grayy .four span").html(`<strong>${selectedIndex + 1}</strong>/${data.testId.exercises.length}`)
        $(".grayy .danxuan p").html(`单选题(共${data.testId.exercises.length}题,合计${data.testId.exercises.length * 3}分)`)
        //渲染题目
        renderExerciseInfo(data)
        //控制收藏点亮的方法
        controlCollectionLight()
    })
}